VOS - rendering

Renderen is het proces waarbij een sjabloon wordt gevuld met gegevens uit de datastorage van je toepassing, ter vervanging van tijdelijke aanduidingen en eenvoudige logica (zoals if-else-instructies of lussen), wat resulteert in een geldig HTML-bestand.

Dynamische partiële views

In de VOS applicatie zijn er twee views die dynamisch gecreëerd moeten worden. D.w.z. de HTML wordt op basis van gegevens (data-driven) door JavaScript aan de DOM toegevoegd. Deze partiële views zijn:

identity
procedure

Identity

De gegevens van de gebruiker, zijn identiteit, worden opgehaald uit het indentity.json bestand en met behulp van JavaScript in de HTML geïnjecteerd of aan de DOM toegevoegd. Die indentity gegevens worden al in het model geladen (zie VOS - Model initialiseren).

De rendering code plaatsen we in een namespace met de naam render. In het vos.js bestand voegen we die namespace toe:

var render = {
    'identity': function (querySelector) {
        var elem = document.querySelector(querySelector);
        elem.innerHTML = '';
        elem.appendChild(makeTextElement(vos.model.identity.firstName + ' ' + vos.model.identity.lastName, 'h2'))
        elem.appendChild(makeTextElement(vos.model.identity.function, 'h3'));
        elem.appendChild(makeTextElement(vos.model.identity.mobile, 'h4'));
        elem.appendChild(makeTextElement(vos.model.myLocation.name));
        elem.appendChild(makeTextElement(vos.model.myLocation.street));
        elem.appendChild(makeTextElement(vos.model.myLocation.phone));
        if (vos.model.identity.loggedIn) {
            elem.appendChild(makeTextElement('aangemeld als ' + vos.model.identity.role));
            var buttonElement = makeButton('Afmelden');
            buttonElement.setAttribute('name', 'uc');
            buttonElement.setAttribute('value', 'home/logout');
            elem.appendChild(buttonElement);

        }
        else {
            elem.appendChild(makeTextElement('aangemeld als gast'));
            var buttonElement = makeButton('Aanmelden');
            buttonElement.setAttribute('name', 'uc');
            buttonElement.setAttribute('value', 'home/loggingIn');
            elem.appendChild(buttonElement);
        }
        return elem;
    }
}

De gegevens staan in vos.model.identity. We maken een tekstelement voor de

voornaam
familienaam
functiebeschrijving
gsm
naam van de organisatie
straat
tel van de organisatie

Indien de gebruiker is aangemeld creëern we een afmelden knop, anders een aanmelden knop.

En voegen die nieuw gecreëerde elementen toe aan het container HTML element met de id die als argument aan die functie wordt meegegeven. Deze methode retourneert bovendien het HTML container element.

procedure

Voor het renderen van de procedure maken we de volgende methoden

make: deze methode creëert op basis van het JSON bestand de nodige HTML elementen;
TEL: deze methode toont het telefoonnummer indien de gebruiker niet is aangemeld, of maakt een tel knop waarmee de gebruiker kan bellen;
SMS: deze methode toont het telefoonnummer indien de gebruiker niet is aangemeld, of maakt een tel knop waarmee de gebruiker een SMS kan versturen;
LIST: een helper methode die een OL HTML element maakt;

Onder de identity methode plaatsen we de procedure methode:

var render = {
    'identity': function (querySelector) {
        var elem = document.querySelector(querySelector);
        elem.innerHTML = '';
        elem.appendChild(makeTextElement(vos.model.identity.firstName + ' ' + vos.model.identity.lastName, 'h2'))
        elem.appendChild(makeTextElement(vos.model.identity.function, 'h3'));
        elem.appendChild(makeTextElement(vos.model.identity.mobile, 'h4'));
        elem.appendChild(makeTextElement(vos.model.myLocation.name));
        elem.appendChild(makeTextElement(vos.model.myLocation.street));
        elem.appendChild(makeTextElement(vos.model.myLocation.phone));
        if (vos.model.identity.loggedIn) {
            elem.appendChild(makeTextElement('aangemeld als ' + vos.model.identity.role));
            var buttonElement = makeButton('Afmelden');
            buttonElement.setAttribute('name', 'uc');
            buttonElement.setAttribute('value', 'home/logout');
            elem.appendChild(buttonElement);

        }
        else {
            elem.appendChild(makeTextElement('aangemeld als gast'));
            var buttonElement = makeButton('Aanmelden');
            buttonElement.setAttribute('name', 'uc');
            buttonElement.setAttribute('value', 'home/loggingIn');
            elem.appendChild(buttonElement);
        }
        return elem;
    },
    'procedure': {
        'make': function (procedureCode) {
            var procedure = vos.model.procedureList.procedure.find(function (item) {
                return item.code === procedureCode;
            });
            elem = render.identity('#view-procedure .show-room');
            var step = document.createElement('DIV');
            step.setAttribute('class', 'step');
            step.appendChild(makeHtmlTextElement(procedure.heading, 'h2'));
            var listElement = document.createElement('OL');
            listElement.setAttribute('class', 'index');
            procedure.step.forEach(function (item, index) {
                var step = makeHtmlTextElement(item.title, 'li');
                if ("action" in item) {
                    var commandPanelElem = makeCommandPanel();
                    item.action.forEach(function (item) {
                        commandPanelElem.appendChild(render.procedure[item.code](item, procedure.title));
                    });
                    step.appendChild(commandPanelElem);
                }
                if ("list" in item) {
                    step.appendChild(render.procedure['LIST'](item.list));
                }
                listElement.appendChild(step);
            });
            step.appendChild(listElement);
            elem.appendChild(step);
        },
        'TEL': function (item, message) {
            // Het telefoonnummer van directie, secretariaat, ... is afhankelijk van de plaats
            var phoneNumber = getPhoneNumber(item.phoneNumber);
            if (vos.model.identity.loggedIn) {
                var buttonElement = makeTileButton('Tel', 'icon-phone');
                buttonElement.addEventListener('click', function () {
                    phoneCall(phoneNumber);
                });
                return buttonElement;
            } else {
                return makeTextElement(item.code + ' ' + phoneNumber, 'P');
            }
        },
        'SMS': function (item, message) {
            // Het telefoonnummer van directie, secretariaat, ... is afhankelijk van de plaats
            var phoneNumber = getPhoneNumber(item.phoneNumber);
            if (vos.model.identity.loggedIn) {
                var buttonElement = makeTileButton('Tel', 'icon-send');
                buttonElement.addEventListener('click', function () {
                    vos.smsPrepare(phoneNumber, message);
                });
                return buttonElement;
            } else {
                return makeTextElement(item.code + ' ' + phoneNumber, 'P');
            }
        },
        'LIST': function (list) {
            var listElement = document.createElement('OL');
            listElement.setAttribute('class', 'index');
            list.forEach(function (item) {
                listElement.appendChild(makeHtmlTextElement(item.title, 'li'))
            });
            return listElement;
        }
    }
};

In de controller wordt de rendering methode opgeroepen:

var controller = {
    'home': {
        'index': function () {
            vos.getPosition();
            vos.setMyLocation();
            render.identity('#home .identity');
            view['home']['index']();
        },
        'gas-leak': function () {
            render.procedure.make('GL');
            view['procedure']('gaslek');
        },

2017-12-16 18:16:45